<template>
  <el-container>
    <el-header>
      <el-tabs v-model="configType">
        <el-tab-pane v-for="c in configList" :key="c" :label="c.label" :name="c.api"></el-tab-pane>
      </el-tabs>
    </el-header>
    <el-main style="padding: 0 20px 20px;">
      <div style="padding: 10px 0;" v-if="configType === 'basic'">
        <el-row :gutter="24">
          <el-col class="sa-col-24" :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
            <div class="title">账户信息</div>
            <div class="bottom">
              <div class="info">
                <el-row :gutter="24">
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">登录账号</div>
                    <div class="content">
                      <el-input v-model="detail.data.account" />
                    </div>
                  </el-col>
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">状态</div>
                    <div class="content">
                      <el-radio-group v-model="detail.data.status">
                        <el-radio value="normal">正常</el-radio>
                        <el-radio value="disabled">禁用</el-radio>
                      </el-radio-group>
                    </div>
                  </el-col>
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">登录密码</div>
                    <div class="content">
                      <el-input v-model="detail.data.password" type="password">
                        <template #suffix>
                          <span v-html="settingStatus('password')"></span>
                        </template>
                      </el-input>
                    </div>
                  </el-col>
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">店铺类型</div>
                    <div class="content">
                      <el-radio-group v-model="detail.data.shop_type">
                        <el-radio value="1" name="commerce">
                          电商商家
                        </el-radio>
                        <el-radio value="2" name="purchase">
                          团购商家
                        </el-radio>
                        <el-radio value="3" name="takeaway">
                          鲸囍生活
                        </el-radio>
                        <el-radio value="4" name="supply">
                          供应链商家
                        </el-radio>
						<el-radio value="5" name="waimai">
                          外卖商家
                        </el-radio>
                      </el-radio-group>
                    </div>
                  </el-col>
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">邮箱号</div>
                    <div class="content">
                      <el-input v-model="detail.data.email">
                        <template #suffix>
                          <span v-html="settingStatus('email')"></span>
                        </template>
                      </el-input>
                    </div>
                  </el-col>
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">绑定手机号</div>
                    <div class="content">
                      <el-input v-model="detail.data.mobile" />
                    </div>
                  </el-col>
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">联系人</div>
                    <div class="content">
                      <el-input v-model="detail.data.contact_name" />
                    </div>
                  </el-col>
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">联系电话</div>
                    <div class="content">
                      <el-input v-model="detail.data.phone" />
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div class="info sa-m-t-20">
                <el-row>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <div class="item">
                      <div class="label">推荐人</div>
                      <div class="content sa-flex" v-if="detail.data.referrer_name">
                        <!-- TODO: 1.推荐人连表查 2.更换推荐人 -->
                        <sa-user-profile
                          type="agent"
                          :user="detail.data.parent_user"
                          :id="detail.data?.parent_user_id"
                        />
                        <!-- 更换上级分销商 -PRO- -->
                        <el-button
                          v-auth="'shop.admin.commission.agent.changeparentuser'"
                          class="is-link sa-m-l-12"
                          type="primary"
                          @click="onChangeParentUser"
                        >更换
                        </el-button>
                      </div>
                      <div class="content" style="height: 36px;line-height: 36px" v-else>暂无推荐人</div>
                    </div>
                    <div class="item">
                      <div class="label">收益余额</div>
                      <div class="content sa-flex">
                        {{ detail.data.money || 0 }}
                        <el-button
                          v-auth="'user.admin.user.recharge'"
                          class="is-link sa-m-l-12"
                          type="primary"
                          @click="onRecharge"
                        >充值
                        </el-button>
                      </div>
                    </div>
                    <div class="item">
                      <div class="label">共计消费</div>
                      <div class="content sa-flex">
                        {{ detail.data.total_spent || 0 }}
                      </div>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <div class="item">
                      <div class="label">上次登陆时间</div>
                      <div class="content" style="height: 36px;line-height: 36px">{{ detail.data.login_time }}</div>
                    </div>
                    <div class="item">
                      <div class="label">登录IP</div>
                      <div class="content">{{ detail.data.login_ip }}</div>
                    </div>
                    <div class="item">
                      <div class="label">注册时间</div>
                      <div class="content">{{ detail.data.create_time }}</div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>

          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col class="sa-col-24" :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
            <div class="title">收款账号</div>
            <div class="bottom">
              <div class="info">
                <el-row :gutter="24">
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">法人姓名</div>
                    <div class="content">
                      <el-input v-model="detail.data.legal_person_name">
                        <template #suffix>
                          <span v-html="settingStatus('legal_person_name')"></span>
                        </template>
                      </el-input>
                    </div>
                  </el-col>
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">银行卡号</div>
                    <div class="content">
                      <el-input v-model="detail.data.legal_person_bank_account">
                        <template #suffix>
                          <span v-html="settingStatus('legal_person_bank_account')"></span>
                        </template>
                      </el-input>
                    </div>
                  </el-col>
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">法人身份证</div>
                    <div class="content">
                      <el-input v-model="detail.data.legal_person_id_card">
                        <template #suffix>
                          <span v-html="settingStatus('legal_person_id_card')"></span>
                        </template>
                      </el-input>
                    </div>
                  </el-col>
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">手机号</div>
                    <div class="content">
                      <el-input v-model="detail.data.legal_person_phone" placeholder="不修改则留空" />
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col class="sa-col-24" :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
            <div class="title">支付信息</div>
            <div class="bottom">
              <div class="info">
                <el-row :gutter="24">
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">支付密码</div>
                    <div class="content">
                      <el-input v-model="detail.data.platform_pay_password">
                        <template #suffix>
                          <span v-html="settingStatus('platform_pay_password')"></span>
                        </template>
                      </el-input>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div style="padding: 10px 0;" v-if="configType === 'company'">
        <el-row :gutter="24">
          <el-col class="sa-col-24" :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
            <div class="title">公司主体</div>
            <div class="bottom">
              <div class="info">
                <el-row :gutter="24">
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">主体类型</div>
                    <div class="content">
                      <el-input v-model="detail.data.entity_type_text" disabled />
                    </div>
                  </el-col>
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">主体名称</div>
                    <div class="content">
                      <el-input v-model="detail.data.entity_name" />
                    </div>
                  </el-col>
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">营业执照</div>
                    <div class="content">
                      <sa-uploader v-model="detail.data.business_license" fileType="image"></sa-uploader>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col class="sa-col-24" :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
            <div class="title">法人信息</div>
            <div class="bottom">
              <div class="info">
                <el-row :gutter="24">
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">证件类型</div>
                    <div class="content">
                      <div>居民身份证</div>
                    </div>
                  </el-col>
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">法人名称</div>
                    <div class="content">
                      <el-input v-model="detail.data.legal_person_name" />
                    </div>
                  </el-col>
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">证件照片</div>
                    <div class="content">
                      <sa-uploader v-model="detail.data.legal_id_images_top" fileType="image"></sa-uploader>
                    </div>
                  </el-col>
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label"></div>
                    <div class="content">
                      <sa-uploader v-model="detail.data.legal_id_images_bottom" fileType="image"></sa-uploader>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-main>
    <el-footer class="sa-footer--submit">
      <el-button type="primary" @click="apply">保存</el-button>
    </el-footer>
  </el-container>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { useModal } from '@/sheep/hooks';
  import { api } from './business.service';
  import pay from './pay.vue';
  import { cloneDeep } from 'lodash';
  import { ElMessage } from 'element-plus';

  const configType = ref('basic');
  const configList = [
    { label: '基本信息', api: 'basic' },
    { label: '公司信息', api: 'company' },
  ];

  const emit = defineEmits(['modalCallBack']);
  const props = defineProps({
    modal: {
      type: Object,
    },
  });

  const detail = reactive({
    data: {
      password: '123456',
    },
  });

  onMounted(() => {
    if (props.modal.params.id) {
      getData();
    }
  });


  const onRecharge = () => {
    // useModal(
    //   pay,
    //   {
    //     title: '金额充值',
    //   },
    //   {
    //     confirm: () => {
    //     },
    //   },
    // );
  };

  const getData = async () => {
    const { error, data } = await api.account_info(props.modal.params.id);
    if (error === 0) {
    //   data.shop_type = data.store_type.map(item => String(item));
      data.shop_type = data.store_type
      detail.data = data;
      detail.data.password = '123456';
      detail.data.entity_type_text = data.entity_type === 'individual' ? '个人' : '企业';
      detail.data.legal_id_images_top = data.legal_id_images.split(',')[0];
      detail.data.legal_id_images_bottom = data.legal_id_images.split(',')[1];
    }
  };

  const apply = async () => {
    let temp = cloneDeep(detail.data);
    // temp.shop_type = temp.shop_type.join(',');
    temp.entity_type = 'company'
    temp.legal_id_images = [temp.legal_id_images_top, temp.legal_id_images_bottom].join(',');
    const { error, data } = await api.edit_account(detail.data.id, temp);
    if (error === 0) {
      ElMessage({
        message: '修改成功',
        type: 'success',
      });
      emit('modalCallBack', {
        event: 'confirm',
      });
    }
  };

  // 更换推荐人
  const onChangeParentUser = () => {
  };

  const settingStatus = (key) => {
    let flag = detail.data[key];
    if (key === 'password') {
      return `<span style="color:${'var(--el-color-success)'}">已设置</span>`;
    }
    return `<span style="color:${flag ? 'var(--el-color-success)' : 'var(--el-color-warning)'}">${flag ? '已' : '未'}设置</span>`;
  };
</script>

<style scoped lang="scss">
  .el-header {
    --el-header-height: fit-content;
  }

  .title {
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    color: var(--sa-subtitle);
    margin-bottom: 8px;
  }

  .bottom {
    padding: 16px;
    background: var(--sa-table-header-bg);
    border-radius: 8px;
    margin-bottom: 20px;

    .nickname {
      line-height: 20px;
      font-size: 20px;
      font-weight: 500;
      color: var(--sa-subtitle);
    }

    .id {
      line-height: 16px;
      font-size: 16px;
      font-weight: 500;
      color: var(--sa-subfont);
    }

    .info {
      padding: 16px 16px 0;
      background: var(--sa-background-assist);
      border-radius: 4px;

      .item {
        margin-bottom: 16px;

        .label {
          height: 12px;
          line-height: 12px;
          font-size: 12px;
          font-weight: 500;
          color: var(--sa-subfont);
          margin-bottom: 8px;
        }

        .content {
          line-height: 32px;
          font-size: 14px;
          font-weight: 400;
          color: var(--sa-subtitle);
        }
      }
    }
  }

  .third-oauth {
    .info {
      padding: 20px 16px 0;

      .item {
        margin-bottom: 24px;

        img {
          width: 32px;
          height: 32px;
        }

        .name {
          color: var(--sa-font);
        }

        .none {
          color: #999;
        }
      }
    }
  }

  .log {
    .bottom {
      padding: 0;
      background: var(--sa-background-assist);

      :deep() {
        .el-tabs__nav-wrap::after {
          height: 0;
        }
      }

      .sa-table {
        height: 300px;
      }

      :deep() {
        .oper-type {
          font-size: 12px;
          color: var(--sa-subtitle);
        }

        .system {
          font-size: 14px;
          color: var(--sa-subtitle);

          img {
            width: 32px;
            height: 32px;
            margin-right: 8px;
          }
        }
      }
    }
  }

  @media only screen and (max-width: 1200px) {
    @for $i from 0 through 24 {
      .sa-col-#{$i} {
        max-width: calc(calc($i * 100%) / 24) !important;
        flex: 0 0 calc(calc($i * 100%) / 24) !important;
      }
    }
  }

  :deep() .el-checkbox {
    margin-right: 10px;
  }
</style>